<template>
    <div class="wrongSetContainer">
      <!-- 题目容器 -->
      <view class="problemContainer" v-for="(item, index) in stem" :key="index">
        <div class="deleteWrong" @click="deleteWrongTitle(item.id)">delete</div>
        <!-- 题干容器 -->
        <div v-if="num===index" class="container">
          <div class="bodyContainer">
        <view class="stem" >({{index+1}}/{{stemTotal}}) {{index+1}}. {{item.name}}</view>
        <!-- 单选项容器 -->
        <radio-group class="optionList">
          <label
            class="radio"
            v-for="(items,ind) in item.optionList"
            :key="items.id"
          >
            <radio color="#2e8e9a" :value="items.content" :checked="items.data"/>
            <!-- 由optionList[index].data判断选中与否 -->
            {{items.content}}
          </label>
        </radio-group>
        </div>

        <div class="myChoose">
          <button @click="preQuestion">上一题</button>
          <button @click="nextQuestion">下一题</button>
        </div>
        <div class="analysis">
          <view class="btn">
            <switch :checked="isShow" @change="showAnalysis" color="#2e8e9a" />解析
          </view>
          <div class="show" :style="{display:isShow?'block':'none'}">
            {{item.analysis}}
          </div>
        </div>
        </div>
      </view>
      <!--        //用于测试-->
<!--      <div @click="addWrongTitle('746427702658990080')" class="add">增错题(测试)</div>-->
  </div>
</template>

<script>
import HttpKit from '@/utils/http-kit'
import globalStore from "../../stores/global-store";
const EXAM_LIST_URL = 'http://127.0.0.1:8080/base-in-back-end'
export default {
  data () {
    return {
      num: 0,
      stem:[{}], //存储题目
      answer:[],//存储答案
      stemTotal: 0,//题数
      stemIndex:0,//题目下标
      questionIDList: [],
      isShow: false,
      myWrongSet: []
    }
  },
  onShow (){
    if(globalStore.state.isLogin==true) {
      this.getWrongSet()
      // this.stemTotal = globalStore.state.wrongSet.length
      // this.stemTotal = this.myWrongSet.length
      // console.log(this.stemTotal)
      // this.detail()
    }else {
      wx.showModal({
        title: '提示',
        content: '你还没有登录，没有错题集',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            wx.switchTab({
              url: '/pages/home/main'
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
            wx.switchTab({
              url: '/pages/home/main'
            })
          }
        }
      })
    }
  },
  methods: {
    getWrongSet(){
      this.$fly.get(EXAM_LIST_URL + '/common/wrong/get/' + globalStore.state.openId)
        .then(e => {
          console.log(e.data.data)
          // globalStore.state.wrongSet = e.data.data
          this.myWrongSet = e.data.data
          this.stemTotal = this.myWrongSet.length
          this.detail()
        })
        .catch(err => {
        })
    },
    detail () {
      for (let i = 0; i < this.stemTotal; i++) {
      // HttpKit.get('/wx/stem/'+ globalStore.state.wrongSet[i].topicId)
      //   console.log(this.myWrongSet[i].topicId)
      HttpKit.get('/wx/stem/'+ this.myWrongSet[i].topicId)
        .then(res => {
          console.log(res)
          this.stem[i] = res.data.data // 题目回显
          // console.log(this.stem[i].name)
        })
        .catch(err => {
        })
        }
    },

    deleteWrongTitle(tid){
      //删除错题
      // var tid = '746402220752240640'
      this.$fly.delete(EXAM_LIST_URL + '/common/wrong/rf/' + globalStore.state.openId + '/' + tid)
        .then(e => {
          console.log(e)
          if(this.num == this.stemTotal-1){
            this.num--
            this.stemTotal--
          }else{
            this.num = this.num
            this.stemTotal--
          }
        })
        .catch(err => {
        })
    },
    addWrongTitle(tid){
      //增加错题
      // var tid = '746402242076082176'
      this.$fly.post(EXAM_LIST_URL + '/common/wrong/add/' + globalStore.state.openId + '/' + tid)
        .then(e => {
          console.log(e)
        })
        .catch(err => {
        })
    },
    preQuestion(){
      if(this.num == 0){
        this.num = 0;
        wx.showLoading({
          title: '这是第一题',
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 500)
      }else{
        this.num--;
      }
    },
    nextQuestion(){
      if(this.num == this.stemTotal-1){
        console.log("已经是最后一题")
        wx.showLoading({
          title: '已经是最后一题',
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 500)
      }else{
        this.num++
      }
    },
    showAnalysis(){
      this.isShow = !this.isShow
    },
  },
    onUnload (options) {
    //清除数据
    Object.assign(this.$data, this.$options.data())
  },
}
</script>

<style scoped lang="less">

.wrongSetContainer {
  position: relative;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  border-bottom: 1px solid #dedede;
  box-shadow: 0px 2px 1px #dedede;
  box-sizing: border-box;
}
.deleteWrong {
  position: absolute;
  top: -20px;
  right: 3px;
  height: 20px;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  color: #990033;
  border-radius: 6px;
  border: 1px solid #02a774;
  padding: 0 2px;
}
.problemContainer {

}
.bodyContainer {
  height: 240px;
  margin-top: 30px;
}
.optionList label{
  display: block;
  margin: 10px 30px;
}
.myChoose {
  display: flex;
  justify-content: space-around;
  margin: 30px auto;
}
.myChoose button {
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #669999;
  font-size: 16px;
}
.analysis .btn {
  float: right;
  font-size: 16px;
}
.show {
  padding-top: 35px;
}
.add {
  position: fixed;
  bottom: 0;
  right: 0;
  border: 1px solid #02a774;
}
</style>
